<template>
	<view class="addBox">
		<view class="addGoods">
			<view class="info">
				<view class="input">
					<text class="certainly">手机号</text>
					<input v-model="data.obj.phone" type="number" placeholder="请输入手机号" />
				</view>
				<view class="select"  @tap="data.show = true">
					<text class="certainly">时间</text>
					<text>{{data.obj.sendingTime || '请选择'}}</text>
					<image src="/static/img/index/25.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="bot">
			<text @tap="submit">完成添加</text>
		</view>
		<u-datetime-picker @cancel="data.show = false" @confirm="confirm" hasInput :show="data.show" mode="datetime"
			v-model="data.serviceTime"></u-datetime-picker>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import {getDefaultSecureInfo,setOrderSecure} from '@/utils/api/index'
	import { onLoad, onBackPress } from '@dcloudio/uni-app';
	import {
		reactive,
	} from 'vue';
	const data = reactive<any>({
		obj:{}
	})

	onLoad(({ orderNo }) => {
		data.obj.orderNo = orderNo;
		getDefaultSecureInfo({data:{orderNo}}).then((res)=>{
			data.obj.sendingTime = res.data.sendingTime;
			data.obj.phone = res.data.phone;
		})
	})
	const submit=()=>{
		if(!data.obj.phone){
			uni.showToast({
				title:'请填写手机号!',
				icon:'none'
			})
			return;
		}
		if(!data.obj.sendingTime){
			uni.showToast({
				title:'请选择时间!',
				icon:'none'
			})
			return;
		}
		uni.showToast({
			title:'加载中...',
			mask:true
		})
		setOrderSecure({data:data.obj}).then((res)=>{
			if(res.code == 200){
				uni.showToast({
					title:'设置成功!',
					icon:'none'
				})
				setTimeout(()=>{
					uni.$emit('safeMode')
					uni.navigateBack()
				},1000)
			}
		})
	}
	const timestampToTime = (timestamp) => {
		var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
		var Y = date.getFullYear() + '-';
		var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
		var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
		var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
		var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
		return Y + M + D + h + m +':00';
	}
	const confirm = (e) => {
		data.obj.sendingTime = timestampToTime(e.value);
		data.show = false;
	}
</script>

<style lang="scss">
	.addBox {
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding-top: var(--status-bar-height);

		>.bot {
			display: flex;
			padding: 0 24rpx;
			text {
				line-height: 88rpx;
				text-align: center;
				border-radius: 88rpx;
				font-size: 32rpx;
				color: #262626;
				background: #6B64D3;
				width: 100%;
				color: #fff;
			}
		}
	}

	.addGoods {
		flex: 1;
		overflow: auto;
		background: #fff;
		padding: 0 24rpx;

		.info {
			.certainly {
				&:before {
					content: '*';
					display: inline-block;
					color: #FF263F;
					margin-right: 5rpx;
				}
			}

			.input {
				padding: 24rpx 32rpx;
				display: flex;
				border-radius: 24rpx;
				background: #F4F6FA;
				align-items: center;
				margin-top: 24rpx;

				text {
					width: 150rpx;
					color: #262626;
					display: flex;
					align-items: center;

				}

				input {
					flex: 1;
				}

				image {
					width: 32rpx;
				}
			}

			.switch {
				padding: 24rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 24rpx;
				background: #F4F6FA;
				margin-top: 24rpx;
			}

			.select {
				padding: 24rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 24rpx;
				background: #F4F6FA;
				margin-top: 24rpx;

				>text:nth-of-type(1) {
					width: 150rpx;
					color: #262626;
					display: flex;
					align-items: center;

				}

				>text:nth-of-type(2) {
					flex: 1;
					color: #262626;
				}

				image {
					width: 25rpx;
				}
			}

			.view {
				padding: 24rpx 32rpx;
				border-radius: 24rpx;
				background: #F4F6FA;
				margin-top: 24rpx;

				.input {
					padding: 0 !important;
				}

				>view {
					margin-top: 40rpx;
					display: flex;
					align-items: center;

					>text:nth-of-type(1) {
						width: 150rpx;
						color: #262626;
						display: flex;
						align-items: center;

					}

					>text:nth-of-type(2) {
						flex: 1;
						color: #262626;
					}
				}

				>view:nth-of-type(1) {
					margin-top: 0;
				}

			}

			.imgs {
				.top {
					margin: 16rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #595959;

					text {
						color: #595959;
					}
				}

				.list {
					display: flex;
					flex-wrap: wrap;

					.listImg {
						width: 128rpx;
						height: 128rpx;
						border-radius: 16rpx;
						margin-right: 16rpx;
						position: relative;

						>image:nth-of-type(1) {
							width: 100%;
							height: 100%;
							border-radius: 16rpx;
						}

						>image:nth-of-type(2) {
							width: 40rpx;
							position: absolute;
							right: -10rpx;
							top: -10rpx;
							z-index: 9;
						}
					}

					.zanwu {
						margin-right: 16rpx;
						width: 128rpx;
						height: 128rpx;
						border-radius: 16rpx;
						background: #F4F6FA;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						color: #C4C4C4;
						font-size: 15rpx;

						image {
							width: 46rpx;
							margin-bottom: 5rpx;
						}
					}
				}
			}

			.input1 {
				padding: 24rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 24rpx;
				background: #F4F6FA;
				margin-top: 24rpx;

				text {
					width: 150rpx;
					color: #262626;
					display: flex;
					align-items: center;

				}

				input {
					flex: 1;
				}

				.right {
					padding: 8rpx 12rpx;
					border-radius: 16rpx;
					background: #fff;
					color: #6B64D3;
				}
			}

			.genduo {
				display: flex;
				color: #FF8C00;
				margin-top: 8rpx;

				image {
					width: 36rpx;
				}
			}
		}
	}

	.head-top {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 88rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		position: relative;

		image {
			width: 36rpx;
			height: 36rpx;
		}

		.title {
			width: 100%;
			flex: 1;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 32rpx;
			color: #333333;
			line-height: 48rpx;
			// text-align: center;
			font-style: normal;
			text-transform: none;
			margin-left: 269rpx;

		}

		.head-btn {
			padding: 8rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 4rpx;
			}
		}

		.head-card {
			position: absolute;
			top: 50rpx;
			right: 0rpx;
			width: 230rpx;
			z-index: 1000;

			.card-item {
				padding: 10rpx 0;
				border-bottom: 1rpx solid #E5E5E5;
			}

			.card-item:last-child {
				border-bottom: none
			}
		}

	}
</style>